"use client"
import Content from '@/app/admin/page'
import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Popconfirm, message } from 'antd';
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
} from '@ant-design/icons';
import Modal from './components/Modal'

import { getBatteryList, delBattery } from '@/api/batteryApi'
import { batteries } from '@/utils/data.json'
export default function Home() {
  const [data, setData] = useState([]);
  const Init = async () => {
    const res = await getBatteryList()
    if (res?.flag) {
      setData(res.data)
    } else {
      message.error('服务器未响应');
    }
  }
  useEffect(() => {
    Init()
  }, [])
  // 删除确认框
  const DelUser = async (_id: string) => {
    await delBattery({ _id })
    await Init()
    message.success('操作成功');
  };
  // 弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelPrpos, setModelPrpos] = useState({});

  const columns: any = [
    {
      title: '电池 ID',
      dataIndex: 'batteryId',
      key: 'batteryId'
    },
    {
      title: '型号',
      dataIndex: 'model',
      key: 'model',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '图片',
      dataIndex: 'picture',
      key: 'picture',
      render: (text: any) => {
        return text ? <img src={text} alt="" height={80} width={120} /> : '-'
      }
    },
    {
      title: '容量(kWh)',
      dataIndex: 'capacity',
      key: 'capacity',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      render: (_: any, record: any) => (
        _ === '维修' ?
          <Tag color='volcano' key={_}>
            {_}
          </Tag>
          :
          _ === '可用' ?
            <Tag color='green' key={_}>
              {_}
            </Tag>
            :
            _ === '已租' ?
              <Tag color='geekblue' key={_}>
                {_}
              </Tag>
              :
              <Tag color='cyan' key={_}>
                {_}
              </Tag>

      ),
    },
    {
      title: '生产日期',
      dataIndex: 'productionDate',
      key: 'productionDate',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '剩余寿命',
      dataIndex: 'remainingLife',
      key: 'remainingLife',
      render: (text: any) => {
        return text ? text + '%' : '-'
      }
    },
    {
      title: '所属电站 ID',
      dataIndex: 'powerStationId',
      key: 'powerStationId',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '电池类型',
      dataIndex: 'batteryType',
      key: 'batteryType',
      render: (_: any, record: any) => (
        _ === '磷酸铁锂' ?
          <Tag color='#108ee9' key={_}>
            {_}
          </Tag>
          : <Tag color='#108ee9' key={_}>
            {_}
          </Tag>

      ),
    },
    {
      title: '能量密度(Wh/kg)',
      dataIndex: 'energyDensity',
      key: 'energyDensity',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '充电循环次数',
      dataIndex: 'cycleTimes',
      key: 'cycleTimes',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '质保截止日期',
      dataIndex: 'warrantyEndDate',
      key: 'warrantyEndDate',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '存放位置 ID',
      dataIndex: 'locationId',
      key: 'locationId',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '是否已回收',
      dataIndex: 'isRecycled',
      key: 'isRecycled',
      render: (_: any, record: any) => (
        _ ?
          <Tag icon={<CheckCircleOutlined />} color='#87d068' key={_}>
            已回收
          </Tag>
          : <Tag icon={<CloseCircleOutlined />} color='#f50' key={_}>
            未回收
          </Tag>

      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button type="primary" size='small' onClick={() => { setIsModalOpen(true); setModelPrpos({ record, type: '编辑' }) }}>编辑</Button>
          <Popconfirm
            title="是否删除这条数据?"
            onConfirm={() => DelUser(record.batteryId)}
            okText="是"
            cancelText="否"
          >
            <Button color="danger" variant="solid" size='small'>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (<Content>
    <div
      style={{
        padding: 24,
        minHeight: 360,
        background: '#fff',
        borderRadius: 10,
        flex: 1,
        overflow: 'auto'
      }}
    >
      <Table columns={columns} dataSource={data} rowKey={(record: any) => record._id} />
      <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} modelPrpos={modelPrpos} Init={Init} />
    </div>
  </Content>
  );
};
